<template>
    <el-skeleton animated :loading="isShowSkeleton" class="goods-item-skeleton-container">
        <template #template>
            <div class="goods-item-skeleton-wrap">
                <!-- 图片区域 -->
                <el-skeleton-item variant="image" style="height: 200px" />

                <!-- 名称区域 -->
                <el-skeleton-item style="height: 20px;margin-top: 10px;" />

                <!-- 价格区域 -->
                <div class="price-skeleton-wrap">
                    <el-skeleton-item style="width: 60px;height: 20px;" />
                    <el-skeleton-item style="width: 60px;height: 20px;" />
                </div>

                <div class="sales-num">
                    <el-skeleton-item style="width: 40px;height: 20px;" />
                </div>
            </div>
        </template>
    </el-skeleton>
</template>

<script setup>
defineProps({
	isShowSkeleton: {
		type: Boolean,
		default: false
	}
})
</script>

<style scoped lang="scss">
.goods-item-skeleton-container {
    width: 220px;
    margin-top: 20px;
    margin-right: 25px;
    &:nth-child(5n) {
        margin-right: 0;
    }
    .goods-item-skeleton-wrap {
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        
        // 价格区域
        .price-skeleton-wrap {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }

        // 销售量
        .sales-num {
            display: flex;
            justify-content: flex-end;
            margin-top: 10px;
        }
    }
}
</style>